<template>
  <div>
    <el-button type="primary" style="margin-top:20px;" @click="open">添加目录</el-button>
    <el-table @row-click="selDir" :data="dirList"  border :highlight-current-row="true">
      <el-table-column label="目录名称" prop="CDName"></el-table-column>  <el-table-column label="课件数" prop="CourseNumber"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}"> 
            <el-link type="primary" @click="toEdit(row)">编辑</el-link>
            <el-link type="danger" @click="toDel(row._id)">删除</el-link>
        </template>
      
      </el-table-column>
    </el-table>
    <el-dialog :title="title" v-model="dirFlag" width="40%">
        <el-form>
          <el-form-item lable="目录名称">
            <el-input v-model="CDName"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
                <el-button type="danger">取消</el-button>
                <el-button type="primary" @click="toAddDir">确定</el-button>
        </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {addDirApi,editDirApi,delDirApi,getCourseDirListApi} from '@/api/course'
import {useRoute} from 'vue-router'
import mitt from '@/utils/mitt'
let route=useRoute()
let dirList=ref([])//目录列表
let title=ref("添加目录")
mitt.on("sendDir",(dir)=>{
  dirList.value=dir
})
// 获取课程下目录列表接口
let getList=async ()=>{
  let res=await getCourseDirListApi({
    CDid:route.query.ID, //课程ID
  });
  console.log(res,"------------")
  dirList.value=res.data.list
}
getList();
let dirFlag=ref(false) //  弹出层控制
 let CDName=ref('')//目录名称
let open=()=>dirFlag.value=true;
let editId=ref('') //正在编辑的目录id
let toAddDir=async ()=>{
  if(editId.value){
    let editRes=await editDirApi({
           CDName:CDName.value, //目录名称
         CDid:route.query.ID, //课程ID
         _id:route.query._id,//课程的_id
         dirid:editId.value //目录的_id 
    })
    console.log(editRes, '编辑成功')
        dirList.value=editRes.data.list;
  }else{
     let res=await addDirApi({
      CDName:CDName.value, //目录名称
      CDid:route.query.ID, //课程ID
      _id:route.query._id //课程的_id
    })
        console.log(res,"添加目录")
     dirList.value=res.data.list;
  }
   
    CDName.value=""
    dirFlag.value=false

}
//编辑回显 


let toEdit=(row)=>{
    editId.value=row._id
    CDName.value=row.CDName
    dirFlag.value=true
    title.value="编辑目录"
}

// 删除目录
let toDel=async (id)=>{
    let res=await delDirApi({
        CDid:route.query._id,//课程的_id
        _id:id //目录的_id
    })
    console.log(res,"删除目录")
    // dirList.value=res.data.list
    getList();
}
//当前行点击事件   选中目录
let selDir=(row)=>{ 
  console.log(row,"选中")
  // 将选择的目录id 传送给兄弟组件
  mitt.emit("sendDirId",row._id)
} 
</script>
<style lang="scss">
.current-row td{
      
        background: skyblue !important;
      
  }
</style>